<template>
  <view class="collection-container" :class="{ 'modal-open': showModal }">
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <text class="nav-title">{{ currentCategory || '收集' }}</text>
      <text class="category-manage-btn" @tap="navigateToCategory">分类管理</text>
    </view>
    
    <!-- 搜索框区域 -->
    <view class="search-section">
      <view class="search-input-wrapper" @click="navigateToSearchPage">
        <text class="search-icon">🔍</text>
        <text class="search-placeholder">搜索内容、标签或分类...</text>
      </view>
    </view>
    
    <!-- 聊天记录区域 -->
    <scroll-view class="message-list" scroll-y="true" :scroll-into-view="scrollIntoView">
      <view v-for="(message, index) in filteredMessages" :key="index" :id="`message-${index}`" class="message-item">
        <!-- 内容区域 -->
        <view class="content-section">
          <text class="message-text">{{ message.content }}</text>
          <text class="message-time">{{ message.time }}</text>
        </view>
        
        <!-- 分类和标签区域 (点击此区域弹出设置面板) -->
        <view class="tags-section" @tap="openTagsModal(index)">
          <!-- 显示已设置的分类 -->
          <view class="category-display" v-if="message.category">
            <text class="category-pill">{{ message.category }}</text>
          </view>
          
          <!-- 显示已设置的标签 -->
          <view class="tags-display" v-if="message.tags.length > 0">
            <text class="tag-pill" v-for="tag in message.tags" :key="tag">{{ tag }}</text>
          </view>
          
          <!-- 未设置分类和标签的提示 -->
          <view class="no-tags" v-if="!message.category && message.tags.length === 0">
            <text class="no-tags-text">点击添加分类和标签</text>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 输入区域 -->
    <view class="input-area">
      <textarea 
        class="input-textarea" 
        placeholder="请输入收集内容..." 
        v-model="newMessage"
        :show-confirm-bar="false"
      ></textarea>
      <button class="send-btn" @tap="sendMessage">发送</button>
    </view>
    
    <!-- 全屏上滑的分类标签设置面板 -->
      <view class="modal-overlay" v-if="showModal" :class="{ 'modal-show': showModal }" @tap="closeTagsModal"></view>
      <view class="tags-modal" v-if="showModal" :class="{ 'modal-show': showModal }">
      <view class="modal-header">
        <text class="modal-title">设置分类和标签</text>
        <text class="modal-close" @tap="closeTagsModal">×</text>
      </view>
      
      <scroll-view class="modal-content" scroll-y="true">
        <!-- 分类选择 -->
        <view class="category-selection">
          <text class="selection-title">分类</text>
          
          <!-- 分类输入框 -->
          <view class="category-input-wrapper">
            <input 
              class="category-input" 
              placeholder="输入新分类..." 
              v-model="newCategoryInput" 
              @confirm="addNewCategory"
            />
            <button class="add-btn" @tap="addNewCategory">添加</button>
          </view>
          
          <!-- 常用分类选项 -->
          <view class="category-options">
            <text 
              v-for="category in categories" 
              :key="category"
              class="category-option" 
              :class="{ active: selectedCategory === category }"
              @tap="selectCategory(category)"
            >
              {{ category }}
            </text>
          </view>
        </view>
        
        <!-- 标签选择 -->
        <view class="tags-selection">
          <text class="selection-title">标签</text>
          
          <!-- 标签输入框 -->
          <view class="tag-input-wrapper">
            <input 
              class="tag-input" 
              placeholder="输入新标签..." 
              v-model="newTagInput" 
              @confirm="addNewTag"
            />
            <button class="add-btn" @tap="addNewTag">添加</button>
          </view>
          
          <!-- 已选标签 -->
          <view class="selected-tags-section" v-if="selectedTags.length > 0">
            <text class="section-subtitle">已选择的标签</text>
            <view class="selected-tags">
              <text 
                v-for="tag in selectedTags" 
                :key="tag"
                class="selected-tag"
              >
                {{ tag }} <text class="remove-tag" @tap="removeSelectedTag(tag)">×</text>
              </text>
            </view>
          </view>
          
          <!-- 常用标签选项 -->
          <view class="tags-options">
            <text 
              v-for="tag in allTags" 
              :key="tag"
              class="tag-option" 
              :class="{ active: selectedTags.includes(tag) }"
              @tap="toggleTag(tag)"
            >
              {{ tag }}
            </text>
          </view>
        </view>
      </scroll-view>
      
      <view class="modal-footer">
        <button class="cancel-btn" @tap="closeTagsModal">取消</button>
        <button class="confirm-btn" @tap="confirmTags">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CollectionPage',
  data() {
    return {
      messages: [
        {
          content: 'Vue3组合式API的使用技巧',
          time: '10:30',
          category: '学习笔记',
          tags: ['Vue3', '前端']
        },
        {
          content: 'uni-app跨平台开发经验总结',
          time: '昨天',
          category: '技术总结',
          tags: ['uni-app', '跨平台', '开发']
        }
      ],
      filteredMessages: [],
      currentCategory: '',
      newMessage: '',
      scrollIntoView: '',
      
      // 标签设置面板相关数据
      showModal: false,
      currentMessageIndex: -1,
      selectedCategory: '',
      selectedTags: [],
      newCategoryInput: '', // 用户输入的新分类
      newTagInput: '', // 用户输入的新标签
      
      // 预定义的分类和标签
      categories: ['学习笔记', '技术总结', '生活记录', '其他'],
      allTags: ['Vue3', '前端', 'uni-app', '跨平台', '开发', 'JavaScript', 'CSS', 'HTML', 'React', 'Node.js']
    };
  },
  onLoad(options) {
    // 处理从温故页面传递过来的分类参数
    if (options && options.category) {
      this.currentCategory = decodeURIComponent(options.category);
      this.filterMessagesByCategory();
    } else {
      // 如果没有传入分类参数，显示所有消息
      this.filteredMessages = this.messages;
    }
    
    // 处理从分享页面传递过来的内容
    if (options && options.shareContent) {
      try {
        const shareContent = decodeURIComponent(options.shareContent);
        // 自动添加分享内容到收集页面
        this.addSharedContent(shareContent);
      } catch (e) {
        console.error('解析分享内容失败', e);
      }
    }
  },
  
  // 处理右上角按钮点击事件，跳转到分类编辑页面
  onNavigationBarButtonTap() {
    uni.navigateTo({
      url: '/pages/category/index'
    });
  },
  methods: {
    // 根据分类过滤消息
    filterMessagesByCategory() {
      if (this.currentCategory) {
        this.filteredMessages = this.messages.filter(message => 
          message.category === this.currentCategory
        );
      } else {
        this.filteredMessages = this.messages;
      }
    },
    
    // 添加从分享页面过来的内容
    addSharedContent(content) {
      // 创建一个新的消息对象
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const timeString = `${hours}:${minutes}`;
      
      const newMessage = {
        content: content,
        time: timeString,
        category: '', // 默认没有分类
        tags: [] // 默认没有标签
      };
      
      // 将新消息添加到数组开头
      this.messages.unshift(newMessage);
      
      // 更新过滤后的消息列表
      this.filterMessagesByCategory();
      
      // 滚动到最新消息
      this.$nextTick(() => {
        this.scrollIntoView = 'message-0';
      });
      
      // 显示提示
      uni.showToast({
        title: '分享内容已添加到收集',
        icon: 'success',
        duration: 2000
      });
    },
    
    // 清除当前分类，显示所有消息
    clearCategory() {
      this.currentCategory = '';
      this.filterMessagesByCategory();
    },
    
    // 跳转到搜索页面
    navigateToSearchPage() {
      console.log('触发导航到搜索页面');
      try {
        uni.navigateTo({
          url: '/pages/collection/search',
          success: function() {
            console.log('导航成功');
          },
          fail: function(error) {
            console.log('导航失败', error);
          }
        });
      } catch (e) {
        console.log('导航异常', e);
      }
    },
    
    // 发送新消息
    sendMessage() {
      if (!this.newMessage.trim()) return;
      
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      
      const message = {
        content: this.newMessage,
        time: `${hours}:${minutes}`,
        category: '',
        tags: []
      };
      
      this.messages.push(message);
      // 更新过滤后的消息列表
      this.filterMessagesByCategory();
      
      this.newMessage = '';
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollIntoView = `message-${this.filteredMessages.length - 1}`;
      });
    },
    
    // 打开分类标签设置面板
    openTagsModal(index) {
      this.currentMessageIndex = index;
      const message = this.messages[index];
      this.selectedCategory = message.category || '';
      this.selectedTags = [...message.tags];
      this.newCategoryInput = '';
      this.newTagInput = '';
      this.showModal = true;
      
      // 防止点击模态框内容时关闭模态框
      const modalContent = document.querySelector('.tags-modal');
      if (modalContent) {
        modalContent.addEventListener('tap', (e) => {
          e.stopPropagation();
        }, { once: true });
      }
      
      // 处理键盘弹出事件
      uni.onKeyboardHeightChange((res) => {
        const keyboardHeight = res.height;
        if (keyboardHeight > 0) {
          // 键盘弹出时的处理
          this.$nextTick(() => {
            // 可以在这里调整布局以适应键盘
          });
        }
      });
    },
    
    // 关闭分类标签设置面板
    closeTagsModal() {
      this.showModal = false;
      this.currentMessageIndex = -1;
      this.newCategoryInput = '';
      this.newTagInput = '';
      
      // 移除键盘监听
      uni.offKeyboardHeightChange();
    },
    
    // 选择分类
    selectCategory(category) {
      this.selectedCategory = category;
    },
    
    // 添加新分类
    addNewCategory() {
      const category = this.newCategoryInput.trim();
      if (category && !this.categories.includes(category)) {
        this.categories.push(category);
      }
      this.selectedCategory = category;
      this.newCategoryInput = '';
    },
    
    // 切换标签
    toggleTag(tag) {
      const index = this.selectedTags.indexOf(tag);
      if (index > -1) {
        this.selectedTags.splice(index, 1);
      } else {
        this.selectedTags.push(tag);
        // 如果是新标签，添加到所有标签列表中
        if (!this.allTags.includes(tag)) {
          this.allTags.push(tag);
        }
      }
    },
    
    // 添加新标签
    addNewTag() {
      const tag = this.newTagInput.trim();
      if (tag) {
        if (!this.allTags.includes(tag)) {
          this.allTags.push(tag);
        }
        if (!this.selectedTags.includes(tag)) {
          this.selectedTags.push(tag);
        }
        this.newTagInput = '';
      }
    },
    
    // 移除已选标签
    removeSelectedTag(tag) {
      const index = this.selectedTags.indexOf(tag);
      if (index > -1) {
        this.selectedTags.splice(index, 1);
      }
    },
    
    // 确认设置分类和标签
    confirmTags() {
      if (this.currentMessageIndex !== -1) {
        const message = this.messages[this.currentMessageIndex];
        this.$set(message, 'category', this.selectedCategory);
        this.$set(message, 'tags', this.selectedTags);
        
        // 更新过滤后的消息列表
      this.filterMessagesByCategory();
    }
      this.closeTagsModal();
    },
    
    // 跳转到分类管理页面
    navigateToCategory() {
      try {
        uni.navigateTo({
          url: '/pages/category/index',
          success: function() {
            console.log('导航到分类管理页面成功');
          },
          fail: function(error) {
            console.log('导航到分类管理页面失败', error);
          }
        });
      } catch (e) {
        console.log('导航异常', e);
      }
    }
  }
};
</script>

<style scoped>
/* 页面基础样式 - 优化响应式布局 */
.collection-container {
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  overflow: hidden;
}

/* 顶部导航栏样式 */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.category-manage-btn {
  font-size: 28rpx;
  color: #007aff;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  transition: background-color 0.2s ease;
}

.category-manage-btn:active {
  background-color: #f0f0f0;
}

/* 当前分类标题样式 */
.current-category-header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.category-back-btn {
  font-size: 36rpx;
  color: #333;
  padding: 5rpx;
}

.current-category-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* 搜索区域样式 */
.search-section {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  padding: 10rpx 20rpx;
  transition: all 0.3s ease;
}

.search-input-wrapper:active {
  background-color: #e5e5e5;
  transform: scale(0.98);
}

.search-icon {
  font-size: 28rpx;
  color: #999;
  margin-right: 12rpx;
}

.search-placeholder {
  flex: 1;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  color: #999;
}

/* 消息列表样式 */
.message-list {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  /* 确保内容不会被输入框遮挡 */
  padding-bottom: 140rpx;
  box-sizing: border-box;
  /* 确保滚动容器不会裁剪内容 */
  width: 100%;
}

/* 消息项样式 */
.message-item {
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
  /* 确保内容不会被裁剪 */
  box-sizing: border-box;
  width: 100%;
  padding: 0 1px; /* 修复某些设备上的边框渲染问题 */
}

.message-item:active {
  transform: scale(0.98);
}

/* 内容区域样式 */
.content-section {
  padding: 24rpx 28rpx 0 28rpx;
  box-sizing: border-box;
}

.message-text {
  font-size: 32rpx;
  color: #333;
  line-height: 1.5;
  word-break: break-all;
  display: block;
  margin-bottom: 12rpx;
}

.message-time {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 20rpx;
}

/* 分类标签区域样式 - 调整为搜索页面样式 */
.tags-section {
  padding: 15rpx 28rpx 20rpx 28rpx;
  background-color: #f8f8f8;
  border-top: 1rpx solid #eee;
  border-radius: 0 0 16rpx 16rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  transition: background-color 0.3s ease;
  box-sizing: border-box;
  width: 100%;
}

.tags-section:active {
  background-color: #f0f0f0;
}

/* 已设置的分类显示 */
.category-display {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.category-pill {
  background-color: #e8f5e9;
  color: #388e3c;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
}

/* 已设置的标签显示 */
.tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.tag-pill {
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
}

/* 未设置分类和标签的提示 */
.no-tags {
  padding: 10rpx 0;
}

.no-tags-text {
  font-size: 24rpx;
  color: #ccc;
  font-style: italic;
}

/* 输入区域样式 */
.input-area {
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: flex-end;
  gap: 20rpx;
}

.input-textarea {
  flex: 1;
  height: 120rpx;
  padding: 15rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  font-size: 28rpx;
  border: none;
  outline: none;
}

.send-btn {
  height: 80rpx;
  padding: 0 36rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
}

.send-btn:active {
  opacity: 0.8;
}

/* 模态框遮罩层 - 美化效果 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  backdrop-filter: blur(4rpx);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.modal-overlay.modal-show {
  opacity: 1;
}

/* 全屏分类标签设置面板 - 与主页面风格保持一致 */
.tags-modal {
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  /* 为iOS设备添加顶部和底部安全区域适配 */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  background-color: #fff;
  z-index: 999;
  transition: top 0.3s ease;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.08);
}

.tags-modal.modal-show {
  top: 0;
}

/* 添加模态框指示器 */
.tags-modal::before {
  content: '';
  position: absolute;
  top: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 8rpx;
  background-color: #e0e0e0;
  border-radius: 4rpx;
}

/* 添加页面加载时的淡入动画 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(100rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tags-modal.modal-show .modal-content {
  animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

/* 模态框头部 - 与主页面风格保持一致 */
.modal-header {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background-color 0.3s ease;
  box-sizing: border-box;
  border-bottom: 1rpx solid #eee;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  letter-spacing: 0;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
  line-height: 1;
  transition: all 0.3s ease;
  padding: 10rpx;
  margin-top: 0;
  margin-right: 0;
}

.modal-close:active {
  transform: rotate(90deg) scale(0.9);
  color: #34495e;
}

/* 模态框内容 - 与主页面风格保持一致 */
.modal-content {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  /* 为底部按钮留出充足空间 */
  padding-bottom: 140rpx;
  /* 确保内容不会被裁剪 */
  min-height: 0;
  background-color: #fff;
  box-sizing: border-box;
  width: 100%;
}

/* 分类输入框区域 - 与主页面风格保持一致 */
.category-input-wrapper {
  display: flex;
  gap: 16rpx;
  margin-bottom: 20rpx;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-top: 0;
}

.category-input {
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  font-size: 28rpx;
  border: none;
  outline: none;
  transition: all 0.3s ease;
}

.category-input:focus {
  border-color: #007aff;
  box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
  background-color: #fff;
}

/* 标签输入框区域 - 与主页面风格保持一致 */
.tag-input-wrapper {
  display: flex;
  gap: 16rpx;
  margin-bottom: 20rpx;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.tag-input {
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  font-size: 28rpx;
  border: none;
  outline: none;
  transition: all 0.3s ease;
}

.tag-input:focus {
  border-color: #5ac8fa;
  box-shadow: 0 0 0 4rpx rgba(90, 200, 250, 0.1);
  background-color: #fff;
}

/* 添加按钮 - 与主页面风格保持一致 */
.add-btn {
  height: 80rpx;
  padding: 0 36rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 100rpx;
  z-index: 5;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
}

.add-btn:active {
  opacity: 0.9;
  transform: scale(0.96);
  box-shadow: 0 2rpx 6rpx rgba(0, 122, 255, 0.2);
}

/* 已选标签区域 - 与主页面风格保持一致 */
.selected-tags-section {
  margin-bottom: 20rpx;
  padding: 15rpx 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  border: none;
}

.section-subtitle {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 12rpx;
  display: block;
  font-weight: 500;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.selected-tag {
  display: inline-block;
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: none;
}

.selected-tag:active {
  transform: scale(0.96);
  box-shadow: 0 2rpx 6rpx rgba(90, 200, 250, 0.3);
}

.remove-tag {
  margin-left: 8rpx;
  font-size: 30rpx;
  line-height: 1;
  transition: all 0.2s ease;
}

.remove-tag:active {
  transform: scale(1.2);
}

/* 分类选择 - 与主页面风格保持一致 */
.category-selection {
  margin-bottom: 20rpx;
  padding: 0;
  background-color: #fff;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  width: 100%;
}

/* 标签选择 - 与主页面风格保持一致 */
.tags-selection {
  margin-bottom: 20rpx;
  padding: 0;
  background-color: #fff;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  width: 100%;
}

.selection-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #eee;
}

/* 分类选项 - 与主页面风格保持一致 */
.category-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  box-sizing: border-box;
  width: 100%;
}

.category-option {
  padding: 10rpx 20rpx;
  background-color: #f5f5f5;
  color: #666;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  letter-spacing: 0;
}

.category-option.active {
  background-color: #e8f5e9;
  color: #388e3c;
  box-shadow: none;
  border: none;
}

/* 标签选项 - 与主页面风格保持一致 */
.tags-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  box-sizing: border-box;
  width: 100%;
}

.tag-option {
  padding: 10rpx 20rpx;
  background-color: #f5f5f5;
  color: #666;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  letter-spacing: 0;
}

.tag-option.active {
  background-color: #e3f2fd;
  color: #1976d2;
  box-shadow: none;
  border: none;
}

/* 模态框底部按钮 - 与主页面风格保持一致 */
.modal-footer {
  padding: 20rpx;
  display: flex;
  gap: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  /* 为iOS设备添加底部安全区域适配 */
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom, 0));
  box-sizing: border-box;
  width: 100%;
  /* 确保按钮区域在最上层 */
  box-shadow: none;
  backdrop-filter: none;
}

.cancel-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f5f5f5;
  color: #666;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  transition: all 0.3s ease;
  letter-spacing: 0;
}

.confirm-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
  transition: all 0.3s ease;
  letter-spacing: 0;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 键盘弹出时的样式调整 */
/* 适配不同设备的键盘弹出 */
</style>